Nouveau composant à disposition pour un affichage de choix sous forme de liste.
Il repose sur l'élément formulaire input[type="checkbox"], il est ainsi plus aisé de mettre à jour son état.
Si on souhaite avoir un item pré-coché (exemple en dessous) il suffit de lui ajouter l'attribut (checked), où de mettre à jour sa valeur via javascript.
La gestion de la couleur se faire grâce à la variable CSS : --checkbox-theme qui se trouve sur l'élément .u-form-checkbox-icon. Vous avez ainsi la liberté sur les couleurs que vous associez à chaque item.
Afin que le rendu soit fonctionnel il faut respecter la structure HTML comme défini en dessous.
Un wrapper global pour la liste :
<div class="u-form-checkbox-list">...</div>
Puis chaque item :
<div class="u-form-checkbox-icon" style="--checkbox-theme: #0063CC;">
<input type="checkbox" id="mon-identifiant-unique"/>
<label for="mon-identifiant-unique">
<span class="u-form-checkbox-icon-icon c-fonticon__icon-calendar"></span>
<span class="u-form-checkbox-icon-text">w</span>
</label>
</div>
Pour les icons on se basera sur la librairie d'icones du projet déjà mis à disposition (attention ici on utilise une balse <span>...</span>et non une balise <i>...</i>)
<div class="u-form-checkbox-list">
<div class="u-form-checkbox-icon" style="--checkbox-theme: #0063CC;">
<input type="checkbox" id="checkbox-id-10"/>
<label for="checkbox-id-10"><span class="u-form-checkbox-icon-icon c-fonticon__icon-calendar"></span><span class="u-form-checkbox-icon-text">w</span></label>
</div>
<div class="u-form-checkbox-icon" style="--checkbox-theme: #BF7F01;">
<input type="checkbox" id="checkbox-id-11"/>
<label for="checkbox-id-11"><span class="u-form-checkbox-icon-icon c-fonticon__icon-eye"></span><span class="u-form-checkbox-icon-text">Granulométrie</span></label>
</div>
<div class="u-form-checkbox-icon" style="--checkbox-theme: #0693BA;">
<input type="checkbox" id="checkbox-id-12"/>
<label for="checkbox-id-12"><span class="u-form-checkbox-icon-icon c-fonticon__icon-info"></span><span class="u-form-checkbox-icon-text">VBS</span></label>
</div>
<div class="u-form-checkbox-icon" style="--checkbox-theme: #CC2C00;">
<input type="checkbox" id="checkbox-id-13"/>
<label for="checkbox-id-13"><span class="u-form-checkbox-icon-icon c-fonticon__icon-map"></span><span class="u-form-checkbox-icon-text">limites d’atterberg</span></label>
</div>
</div>
<div class="u-form-checkbox-list">
<div class="u-form-checkbox-icon" style="--checkbox-theme: #0063CC;">
<input type="checkbox" id="checkbox-id-20" checked="checked"/>
<label for="checkbox-id-20"><span class="u-form-checkbox-icon-icon c-fonticon__icon-calendar"></span><span class="u-form-checkbox-icon-text">w</span></label>
</div>
<div class="u-form-checkbox-icon" style="--checkbox-theme: #BF7F01;">
<input type="checkbox" id="checkbox-id-21" checked="checked"/>
<label for="checkbox-id-21"><span class="u-form-checkbox-icon-icon c-fonticon__icon-eye"></span><span class="u-form-checkbox-icon-text">Granulométrie</span></label>
</div>
<div class="u-form-checkbox-icon" style="--checkbox-theme: #0693BA;">
<input type="checkbox" id="checkbox-id-22" checked="checked"/>
<label for="checkbox-id-22"><span class="u-form-checkbox-icon-icon c-fonticon__icon-info"></span><span class="u-form-checkbox-icon-text">VBS</span></label>
</div>
<div class="u-form-checkbox-icon" style="--checkbox-theme: #CC2C00;">
<input type="checkbox" id="checkbox-id-23" checked="checked"/>
<label for="checkbox-id-23"><span class="u-form-checkbox-icon-icon c-fonticon__icon-map"></span><span class="u-form-checkbox-icon-text">limites d’atterberg</span></label>
</div>
</div>